<template>
  <div class="hotelInfo">
    <!-- 顶部面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/hotel' }">酒店</el-breadcrumb-item>
      <el-breadcrumb-item
        :to="{ path: '/hotel?cityName=' + $store.state.hotel.cityName }"
        >{{ $store.state.hotel.cityName }}酒店预订</el-breadcrumb-item
      >
      <el-breadcrumb-item>{{ hotelInfo.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 酒店概述 -->
    <el-row class="hotelAddress">
      <el-col :span="24">
        <h2>{{ hotelInfo.name }}</h2>
      </el-col>
      <el-col :span="24">{{ hotelInfo.alias }}</el-col>
      <el-col :span="24">
        <i class="el-icon-location"></i>{{ hotelInfo.address }}
      </el-col>
    </el-row>
    <!-- 酒店图片展示 -->
    <el-row class="hotel-pic">
      <el-col :span="16">
        <img width="640" height="360" src="/image/hotel/1.jpeg" alt="" />
      </el-col>
      <el-col :span="8" >
        <el-row style="margin-left:-10px; margin-right:-10px;">
          <el-col style="padding-left:10px; padding-right:10px;" :span="12" v-for="(item,index) in hotelPicList" :key="index">
            <img :src="item" width="160" alt="">
          </el-col>
         
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotelInfo: {},
      hotelPicList:[
        '/image/hotel/1.jpeg',
        '/image/hotel/2.jpeg',
        '/image/hotel/3.jpeg',
        '/image/hotel/4.jpeg',
        '/image/hotel/5.jpeg',
        '/image/hotel/6.jpeg',
      ]

    };
  },
  mounted() {
    console.log(this.$store.state.hotel.cityName);
    console.log(this.$route.query.id);
    this.$axios({
      url: `/hotels?id=${this.$route.query.id}`
    }).then(res => {
      // console.log(res);
      this.hotelInfo = res.data.data[0];
      console.log(this.hotelInfo);
    });
  }
};
</script>

<style lang="less" scoped>
.hotelInfo {
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
  .breadcrumb {
    margin-bottom: 20px;
  }
  h2 {
    font-weight: 400;
  }
  .hotel-pic {
    margin: 40px 0;
  }
}
</style>
